<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		<el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
		<el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
			<el-button @click="$router.push('regist')">注册</el-button>
		</el-form-item>
	</el-form>
</template>
 
<script>
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
 
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
 
		return {
			activeName: 'second',
			ruleForm: {
				name: '',
				pass: '',
				checkPass: ''
			},
			rules: {
				name: [{ required: true, message: '请输入您的名称', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }],
				pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
				checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
			},
      isValid: false
		};
	},
 
	methods: {
		submitForm(formName) {
      console.log("submitForm")
      let unameAndPwds = window.localStorage.getItem("uname-and-pwd").split("!!")

      for (let i = 0; i < unameAndPwds.length; i++) {
        let unameAndPwd = unameAndPwds[i]

        if (unameAndPwd != null) {
          let uname = unameAndPwd.split("||")[0];
          let pwd = unameAndPwd.split("||")[1];

          if (uname == this.ruleForm.name && pwd == this.ruleForm.pass) {
            this.isValid = true
          }
        }
      }

			this.$refs[formName].validate(valid => {
				if (this.isValid) {
					this.$message({
						type: 'success',
						message: '登录成功'
					});
          setTimeout(this.$router.push(`homePage`),1000);
					// this.activeName: 'first',
				} else {
          this.$message({
            type: 'warning',
            message: '登录失败，请检查用户名或密码!'
          });
					console.log();
					return false;
				}
			});
		},
 
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>
